<template>
    <el-row type="flex" justify="center">
        <el-col :span="4" style="margin-top: 150px">
            <el-card class="box-card">
                <div slot="header">
                    <span>请登录</span>
                </div>
                <el-form ref="form" :model="form" label-width="80px">
                    <div>
                        <el-input placeholder="请输入用户名" v-model="form.username">
                            <template slot="prepend">账  号</template>
                        </el-input>
                    </div>
                    <div style="margin-top: 15px;">
                        <el-input type="password" placeholder="请输入密码" v-model="form.password">
                            <template slot="prepend">密  码</template>
                        </el-input>
                    </div>
                    <div style="margin-top: 15px">
                        <el-button type="primary" @click="onLogin" style="width: 100%;">登录</el-button>
                    </div>
                </el-form>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
import * as types from '@/util/types'
export default {
    name: "login",
    components: {
    },
    methods:{
      onLogin:function () {
          this.$http.post('/login',this.form)
              .then(resp=>{
                  if(resp.data.code===200){
                      this.$store.commit(types.LOGIN, "login")
                      this.$router.replace("/")
                  }
              });
      }
    },
    data:function () {
        return{
            form:{
                username:'',
                password:''
            }
        }
    }
};
</script>